<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改货物参数')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
    <th:block th:include="include :: summernote-css" />

    <link th:href="@{/ajax/libs/summernote/summernote.css}" rel="stylesheet"/>
    <link th:href="@{/ajax/libs/summernote/summernote-bs3.css}" rel="stylesheet"/>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-goodparameter-edit" th:object="${sysGoodparameter}">
            <input name="goodParameterId" readonly th:field="*{goodParameterId}" type="hidden">
            <!--<div class="form-group">    -->
                <!--<label class="col-sm-3 control-label">货物表ID：</label>-->
                <!--<div class="col-sm-8">-->
                    <input name="goodsId" readonly th:field="*{goodsId}" class="form-control" type="hidden">
                <!--</div>-->
            <!--</div>-->
            <!--<div class="form-group">    -->
                <!--<label class="col-sm-3 control-label">供应商ID：</label>-->
                <!--<div class="col-sm-8">-->
                    <input name="supplierId" readonly th:field="*{supplierId}" class="form-control" type="hidden">
                <!--</div>-->
            <!--</div>-->
            <div class="form-group">
                <label class="col-sm-3 control-label">商品状态：</label>
                <div class="col-sm-8">
                    <div class="radio-box">
                        <label class="checkbox-inline">
                            <input type="radio" name="goodStatus"  value="0" th:checked="${sysGoodparameter.goodStatus eq '0'}"> 未审核
                        </label>
                        <label class="checkbox-inline">
                            <input type="radio" name="goodStatus" checked  value="1" th:checked="${sysGoodparameter.goodStatus eq '1'}"> 审核通过
                        </label>
                        <label class="checkbox-inline">
                            <input type="radio" name="goodStatus"  value="-1" th:checked="${sysGoodparameter.goodStatus eq '-1'}"> 审核驳回
                        </label>
                        <!--<input type="radio" id="goodStatus1" name="goodStatus"  value="0">-->
                        <!--<label for="goodStatus1" th:text="未审核" th:checked="*{goodStatus eq '0'}"></label><br/>-->
                        <!--<input type="radio" id="goodStatus2" name="goodStatus" value="1" th:checked="*{goodStatus eq '1'}">-->
                        <!--<label for="goodStatus2" th:text="审核通过"></label>-->
                        <!--<input type="radio" id="goodStatus3" name="goodStatus" value="-1" th:checked="*{goodStatus eq '-1'}">-->
                        <!--<label for="goodStatus3" th:text="驳回"></label>-->
                    </div>
                </div>
            </div>
            <div class="form-group" id="subFather">
                <label class="col-sm-3 control-label">货物类型：</label>
                <div class="col-sm-4" >
                    <select readonly  class="type form-control m-b" id="father" data-first-title="请选择">
                        <option value="">请选择</option>
                        <!--<option th:each="dict : ${goodsTypes}" th:text="${dict.bigTpeName}" th:value="${dict.bigGoodsType}"></option>-->
                    </select>
                    <!--<input name="goodsId" class="form-control" type="text">-->
                </div>
                <div class="col-sm-4">
                    <select readonly class="router form-control m-b" id="goodsId" name="goodsId" data-first-title="请选择" th:onchange="'javascript:selectGoodsbyType();'">
                        <option value="">请选择</option>
                    </select>
                </div>

            </div>
            <!--<div class="form-group">    -->
                <!--<label class="col-sm-3 control-label">商品名称：</label>-->
                <!--<div class="col-sm-8">-->
                    <!--<input name="goodName" th:field="*{goodName}" class="form-control" type="text">-->
                <!--</div>-->
            <!--</div>-->
            <div class="form-group">
                <label class="col-sm-3 control-label">商品名称：</label>
                <div class="col-sm-8">
                    <!--<select name="goodName" class="form-control m-b" id="goodName" >-->
                        <!--&lt;!&ndash;<option th:each="goods : ${goods}" th:text="${goods.goodsName}" th:value="${goods.goodsId}"></option>&ndash;&gt;-->
                    <!--</select>-->
                    <input name="goodName" readonly class="form-control" th:field="*{goodName}" type="text">
                </div>
            </div>

            <div class="form-group">    
                <label class="col-sm-3 control-label">商品品牌：</label>
                <div class="col-sm-8">
                    <input name="attribite3" readonly th:field="*{attribite3}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">入围价格：</label>
                <div class="col-sm-8">
                    <!--<select name="goodName" class="form-control m-b" id="goodName" >-->
                    <!--&lt;!&ndash;<option th:each="goods : ${goods}" th:text="${goods.goodsName}" th:value="${goods.goodsId}"></option>&ndash;&gt;-->
                    <!--</select>-->
                    <input name="goodPrice" class="form-control" readonly th:field="*{goodPrice}" type="text">
                </div>
            </div>
            <!--<div class="form-group">    -->
                <!--<label class="col-sm-3 control-label">参数：</label>-->
                <!--<div class="col-sm-8">-->
                    <!--<input name="goodParameters" th:field="*{goodParameters}" class="form-control" type="text">-->
                <!--</div>-->
            <!--</div>-->
            <div id="computer" style="display: none;">
                <div class="form-group" id="chicun">
                    <label class="col-sm-3 control-label">屏幕尺寸：</label>
                    <div class="col-sm-8">
                        <input id="pmchicun" readonly class="form-control" name="pmchicun" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">处理器：</label>
                    <div class="col-sm-8">
                        <input id="chuliqi" readonly class="form-control" name="chuliqi" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">操作系统：</label>
                    <div class="col-sm-8">
                        <input id="caozuoxitong" readonly class="form-control" name="caozuoxitong" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">显示器：</label>
                    <div class="col-sm-8">
                        <input id="xianshiqi" readonly class="form-control" name="xianshiqi" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">内存：</label>
                    <div class="col-sm-8">
                        <input id="neicun" readonly class="form-control" name="neicun" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">硬盘：</label>
                    <div class="col-sm-8">
                        <input id="yingpan" readonly class="form-control" name="yingpan" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">显卡：</label>
                    <div class="col-sm-8">
                        <input id="xianka" readonly class="form-control" name="xianka" type="text">
                    </div>
                </div>
                <div class="form-group" id="zhongliang">
                    <label class="col-sm-3 control-label">笔记本重量：</label>
                    <div class="col-sm-8">
                        <input id="bjbzhongliang" readonly class="form-control" name="bjbzhongliang" type="text">
                    </div>
                </div>

            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">参数：</label>
                <div class="col-sm-8">
                    <!--<input id="other" name="other" readonly type="hidden">-->
                    <!--<div class="shangpinmiaoshu" id="editor"></div>-->
                    <textarea class="form-control" disabled id="other" name="other" rows="3"></textarea>

                </div>
            </div>
            <div class="form-group options">
                <label class="col-sm-3 control-label">配选件：</label>
                <div class="col-sm-3">
                    <input name="optionsName" readonly  class="form-control" type="text" placeHolder="请输入配选件名" maxlength="20" style="width: 90%;" />
                </div>
                <div class="col-sm-4">
                    <input name="variablePrice" readonly type="text" placeHolder="请输入差价(元)" maxlength="9" class="form-control number" style="width: 75%;" onblur="priceChange()"/>
                </div>
                <div class="col-sm-2">
                    <!--<a class="a-inline-block add_img" onclick="addOption()"></a>-->
                    <button type="button" disabled class="btn btn-success" onclick="addOption()" >+</button>
                </div>
            </div>
            <!--<div class="form-group">    -->
                <!--<label class="col-sm-3 control-label">商品状态：</label>-->
                <!--<div class="col-sm-8">-->
                    <!--<div class="radio-box">-->
                        <!--<input type="radio" name="goodStatus" value="">-->
                        <!--<label th:for="goodStatus" th:text="未知"></label>-->
                    <!--</div>-->
                    <!--<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 代码生成请选择字典属性</span>-->
                <!--</div>-->
            <!--</div>-->

            <div class="form-group">    
                <label class="col-sm-3 control-label">产品图片表：</label>
                <div class="file-loading">
                    <input id="fileinput-demo-1" readonly name="file" type="file"  multiple>
                </div>
            </div>

            <div class="form-group">    
                <label class="col-sm-3 control-label">备注：</label>
                <div class="col-sm-8">
                    <input name="remarks" readonly th:field="*{remarks}" class="form-control" type="text">
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: jquery-cxselect-js" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <th:block th:include="include :: summernote-js" />
    <script th:src="@{/ajax/libs/summernote/summernote.min.js}"></script>
    <script th:src="@{/ajax/libs/summernote/summernote-zh-CN.js}"></script>
    <script th:inline="javascript">
        var prefix = ctx + "system/goodparameter";
        $("#form-goodparameter-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
//                var sHTML = $('.shangpinmiaoshu').summernote('code');
//                $("#other").val(sHTML);

                var goodParameters={};
                var pmchicun=$("#pmchicun").val();
                goodParameters.pmchicun=pmchicun;
                var chuliqi=$("#chuliqi").val();
                goodParameters.chuliqi=chuliqi;
                var caozuoxitong=$("#caozuoxitong").val();
                goodParameters.caozuoxitong=caozuoxitong;
                var xianshiqi=$("#xianshiqi").val();
                goodParameters.xianshiqi=xianshiqi;
                var neicun=$("#neicun").val();
                goodParameters.neicun=neicun;
                var yingpan=$("#yingpan").val();
                goodParameters.yingpan=yingpan;
                var xianka=$("#xianka").val();
                goodParameters.xianka=xianka;
                var bjbzhongliang=$("#bjbzhongliang").val();
                goodParameters.bjbzhongliang=bjbzhongliang;
                var other=$("#other").val();
                goodParameters.other=other;
                $("#goodParameters").val(JSON.stringify(goodParameters));


                var optionsName=$("input[name='optionsName']");
                var variablePrice=$("input[name='variablePrice']")

                var parameter=[];
                $("input[name='optionsName']").each(function(index,item){
                    parameter.push({optionsName:$(this).val(),variablePrice:$("#variablePrice_"+index).val()})
                })
                $.operate.save(prefix + "/edit", $('#form-goodparameter-edit').serialize()+"&goodParameters="+JSON.stringify(goodParameters)+"&withoption="+JSON.stringify(parameter));
            }
        }


        $(document).ready(function(){
            var sysGoodparameter = [[${sysGoodparameter}]];
            console.log(sysGoodparameter);
            if (sysGoodparameter.goodsId == '3') {
                $("#computer").css("display", "block");
                $("#chicun").css("display", "none");
                $("#zhongliang").css("display", "none");
            } else if (sysGoodparameter.goodsId == '4') {
                $("#computer").css("display", "block");
                $("#chicun").css("display", "block");
                $("#zhongliang").css("display", "block");
            } else {
                $("#computer").css("display", "none");
            }
            //商品参数处理
            var goodsParas=JSON.parse(sysGoodparameter.goodParameters);
            console.log(goodsParas)
            var goodParameters={};
            $("#pmchicun").val(goodsParas.pmchicun);
            $("#chuliqi").val(goodsParas.chuliqi);
            $("#caozuoxitong").val(goodsParas.caozuoxitong);
            $("#xianshiqi").val(goodsParas.xianshiqi);
            $("#neicun").val(goodsParas.neicun);
            $("#yingpan").val(goodsParas.yingpan);
            $("#xianka").val(goodsParas.xianka);
            $("#bjbzhongliang").val(goodsParas.bjbzhongliang);
            $("#other").html(goodsParas.other);

            //配选件处理
            var withOptions=JSON.parse(sysGoodparameter.withoption);

            console.log(withOptions)
            if(withOptions instanceof Array &&withOptions.length>0){
                $("input[name='optionsName']:first").val(withOptions[0].optionsName);
                $("input[name='variablePrice']:first").val(withOptions[0].variablePrice);
                for(var i=1;i<withOptions.length;i++){
                    var html= '' +
                            '<div class="form-group options" >' +
                            '<label class="col-sm-3 control-label">&nbsp;</label>' +
                            '<div class="col-sm-3"><input name="optionsName" readonly class="form-control" type="text" placeHolder="请输入配选件名" maxlength="60" style="width: 90%;" value="'+withOptions[i].optionsName+'" /></div>' +
                            '<div class="col-sm-4"><input name="variablePrice" readonly class="form-control" type="text" placeHolder="请输入差价" maxlength="9" class="number" style="width: 75%;" onblur="priceChange()" value="'+withOptions[i].variablePrice+'" /></div>' +
                            '<div class="col-sm-2">' +
                            '<button type="button" class="btn btn-danger" disabled onclick="reduceOption(this)">-</button>'
//                    '<a class="a-inline-block reduce_img" onclick="reduceOption(this)"></a>' +
                    '</div>' +
                    '</div>';
                    $("div.options:last").after(html);
                }
            }


            $("input[name='variablePrice']").each(function(i){
                $(this).attr("id","variablePrice_"+i);
            });
            $("#fileinput-demo-1").fileinput({
                'theme': 'explorer-fas',
                'uploadUrl':  "/common/upload2",
                overwriteInitial: false,
                initialPreviewAsData: true,
                initialPreview: JSON.parse(sysGoodparameter.imageUrl)
            });
            $("#fileinput-demo-1").on("fileuploaded", function(event, data, previewId, index) {
                files = data.files;
                console.log(data)
            });
//            $('.shangpinmiaoshu').summernote({
//                height: '220px',
//                lang: 'zh-CN',
//                callbacks: {
//                    onImageUpload: function (files) {
//                        sendFile(files[0], this);
//                    }
//                }
//            });
//
//            $('#editor').summernote('code', goodsParas.other);
            var data = [[${goodsTypes}]];
            $('#subFather').cxSelect({
                selects: ['type', 'router'],
                jsonValue: 'bigGoodsType',
                jsonName: 'bigTpeName',
                jsonSub:'smallList',
                data: data
            });
            console.log(data);
            var sonShuju=[];
            for(var i=0;i<data.length;i++){
                for(var j=0;j<data[i].smallList.length;j++){
                    if(data[i].smallList[j].bigGoodsType==sysGoodparameter.goodsId){
                        sonShuju=data[i].smallList;
//                        $("#father").attr("data-value",data[i].bigGoodsType);

                        $("#father").find("option[value="+data[i].bigGoodsType+"]").attr("selected",true);

                    }
                }
            }
//            console.log("goodsId==="+sysGoodparameter.goodsId)
            var sonHtml="";
            for(var i=0;i<sonShuju.length;i++){
                sonHtml+='<option  value='+sonShuju[i].bigGoodsType+'>'+sonShuju[i].bigTpeName+'</option>';

            }
            $("#goodsId").html(sonHtml);
            $("#goodsId").find("option[value="+sysGoodparameter.goodsId+"]").attr("selected",true);
            $.ajax({
                type: "POST",
                url: "/system/goods/goodslist",
                dataType:"json",
                data: {goodsId:sysGoodparameter.goodsId},
                success: function(data1){
                    console.log(data1)
                    var html="";
                    for(var i=0;i<data1.length;i++){
                        if(data1[i].goodsName == sysGoodparameter.goodName){
                            console.log(sysGoodparameter.goodsName+'==='+data1[i].goodsName)
                            html+='<option  value='+data1[i].goodsName+' selected="selected">'+data1[i].goodsName+'</option>';
                        }else {
                            html+='<option  value='+data1[i].goodsName+'>'+data1[i].goodsName+'</option>';

                        }
                    }
                    $("#goodName").html(html);
                }

            });





        });


        function selectType(){
            // 直接返回获取
            var data = [[${goodsTypes}]];
            var sondata=[];
            var selectFather=$('#father').val();
            for(var i=0;i<data.length;i++){
                if(data[i].bigGoodsType==selectFather){
                    sondata=data[i].smallList;
                }
            }
            $('#subFather').cxSelect({
                selects: ['type', 'router'],
                jsonValue: 'bigGoodsType',
                jsonName: 'bigTpeName',
                data: sondata
            });
        }

        // 上传文件
        function sendFile(file, obj) {
            var data = new FormData();
            data.append("file", file);
            $.ajax({
                type: "POST",
                url: ctx + "common/upload",
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function(result) {
                    if (result.code == web_status.SUCCESS) {
                        $(obj).summernote('editor.insertImage', result.url, result.fileName);
                    } else {
                        $.modal.alertError(result.msg);
                    }
                },
                error: function(error) {
                    $.modal.alertWarning("图片上传失败。");
                }
            });
        }
        function selectGoodsbyType() {
            var goodsId = $("#goodsId option:selected").val();
            console.log(goodsId)
            if (goodsId == '3') {
                $("#computer").css("display", "block");
                $("#chicun").css("display", "none");
                $("#zhongliang").css("display", "none");
            } else if (goodsId == '4') {
                $("#computer").css("display", "block");
                $("#chicun").css("display", "block");
                $("#zhongliang").css("display", "block");
            } else {
                $("#computer").css("display", "none");
            }
        }

        function addOption(){

            var str = '' +
                    '<div class="form-group options" >' +
                    '<label class="col-sm-3 control-label">&nbsp;</label>' +
                    '<div class="col-sm-3"><input name="optionsName" readonly="readonly" class="form-control" type="text" placeHolder="请输入配选件名" maxlength="60" style="width: 90%;" /></div>' +
                    '<div class="col-sm-4"><input name="variablePrice" readonly="readonly" class="form-control" type="text" placeHolder="请输入差价" maxlength="9" class="number" style="width: 75%;" onblur="priceChange()"/></div>' +
                    '<div class="col-sm-2">' +
                    '<button type="button" class="btn btn-danger" disabled onclick="reduceOption(this)">-</button>'
//                    '<a class="a-inline-block reduce_img" onclick="reduceOption(this)"></a>' +
            '</div>' +
            '</div>';
            $("div.options:last").after(str);
            $("input[name='variablePrice']").each(function(i){
                $(this).attr("id","variablePrice_"+i);
            });
        }
        function reduceOption(obj){
            $(obj).closest("dl").remove();
        }
        function priceChange(){
            var prices = 0;
            $("input[name='variablePrice']").each(function(){
                var price = parseInt($(this).val());
                if(price && price != "NaN"){
                    prices += price;
                }
            });
            var pric = parseInt($("input[name='price']").val());
            if(pric && pric != "NaN"){
                prices += pric;
            }
            $("input[name='offerAmount']").val(prices);
        }
    </script>
</body>
</html>